import React, {FC} from 'react';
import {StyleSheet, TextInputProps, View} from 'react-native';
import {TextInput} from 'react-native-gesture-handler';
import {STYLE_COLOR} from '../../../variables';

interface FormInputProps extends TextInputProps {
  validator?: (str: string) => boolean;
}

const FormInput: FC<FormInputProps> = ({...props}) => {
  return (
    <View style={[styles.inputContainer]}>
      <TextInput style={styles.inputText} {...props} />
    </View>
  );
};

export const INPUT_HEIGHT = 52;

const styles = StyleSheet.create({
  inputContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    paddingVertical: 8,
    height: INPUT_HEIGHT,
    borderBottomColor: STYLE_COLOR.TEXT_LIGHT_GREY,
    borderBottomWidth: StyleSheet.hairlineWidth,
  },
  inputText: {
    flex: 1,
    color: STYLE_COLOR.TEXT_MAIN,
    height: 44,
  },
});

export default FormInput;
